<template>
	<view class="wrap">
		<view class="card">
			<view class="">
				点击上传身份证正面：
			</view>
			<view class="front" @click="obverse">
				<view class="" style="width: 620rpx;height: 260rpx;">
					<image v-if="frontal" :src="frontal" mode="aspectFit"></image>
				</view>
			</view>
			<view class="">
				点击上传身份证反面：
			</view>
			<view class="front" @click="opposite">
				<image v-if="reverse" :src="reverse" mode="aspectFit"></image>
			</view>
		</view>
		<view class="Dame">
			<view class="ation">
				<view class="Inform">
					担保人:
				</view>
				<input v-model="userName" type="text" placeholder="请输入担保人姓名" />
			</view>
			<view class="ation">
				<view class="Inform">
					手机号:
				</view>
				<input v-model="mobile" type="text" placeholder="请输入手机号" />
			</view>
			<view class="ation">
				<view class="Inform">
					身份证:
				</view>
				<input v-model="idCard" type="text" placeholder="请输入身份证号码" />
			</view>
			<button @click="quereng">确认</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_id: "",
				userName: "",
				mobile: "",
				idCard: "",
				idCard_front: "",
				idCard_back: "",
				frontal: '',
				reverse: ''
			}
		},
		onLoad(e) {
			this.order_id = e.order_id;
		},
		methods: {
			idCardClick(value) {
				return /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(
					value
				)
			},
			quereng() {
				let self = this;
				console.log(self.userName, self.mobile, self.idCard, self.idCard_front, self.idCard_back)
				if (self.userName == "" || self.mobile == "" || self.idCard == "" || self.idCard_front == "" || self
					.idCard_back == "") {
					uni.showToast({
						title: "请将信息填写完整！",
						duration: 2000,
						icon: "none",
					});
					return;
				}
				if (self.idCardClick(self.idCard) == false) {
					uni.showToast({
						title: "身份证号码有误,请重填！",
						duration: 2000,
						icon: "none",
					});
					return;
				}
				self._post('order.order/addSurety', {
					order_id: self.order_id,
					userName: self.userName,
					mobile: self.mobile,
					idCard: self.idCard,
					idCard_front: self.idCard_front,
					idCard_back: self.idCard_back,
				}, (res) => {
					if (res.code) {
						if (res.data.order_surety_url !== '') {
							my.ap.openURL({
								url: res.data.order_surety_url,
								success: (res) => {
									console.log('openURL success', res)
								},
								fail: (err) => {
									console.log('openURL success', err)
								}
							});
						}
					}

				})
			},
			obverse() {
				let self = this;
				let params = {
					token: uni.getStorageSync('token'),
					app_id: '10001'
				};
				uni.chooseImage({
					success: (chooseImageRes) => {
						console.log(chooseImageRes, 'chooseImageRes')
						const tempFilePaths = chooseImageRes.tempFilePaths;
						self.frontal = tempFilePaths[0];
						uni.uploadFile({
							url: 'https://shoujizulin3.hzrjkf.com/index.php/api/file.upload/image',
							filePath: tempFilePaths[0],
							fileType: 'image',
							name: 'iFile',
							formData: params,
							success: function(res) {
								let data = JSON.parse(res.data)
								console.log(data)
								self.idCard_front = data.data.file_path
							},
							fail(err) {},
							complete: function() {}
						});
					}
				});
			},
			opposite() {
				let self = this;
				let params = {
					token: uni.getStorageSync('token'),
					app_id: '10001'
				};
				uni.chooseImage({
					success: (chooseImageRes) => {
						console.log(chooseImageRes, 'chooseImageRes')
						const tempFilePaths = chooseImageRes.tempFilePaths;
						self.reverse = tempFilePaths[0];
						uni.uploadFile({
							url: 'https://shoujizulin3.hzrjkf.com/index.php/api/file.upload/image',
							filePath: tempFilePaths[0],
							fileType: 'image',
							name: 'iFile',
							formData: params,
							success: function(res) {
								let data = JSON.parse(res.data)
								console.log(data)
								self.idCard_back = data.data.file_path
							},
							fail(err) {},
							complete: function() {}
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 20rpx;
	}

	.card {
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		border-radius: 16rpx;

		.front {
			width: 100%;
			height: 260rpx;
			border: 1rpx solid #f5f5f5;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 20rpx 0;

			image {
				width: 600rpx;
				height: 260rpx;
			}
		}
	}

	::v-deep .uni-select {
		border: none !important;
	}

	::v-deep .uni-select__input-placeholder {
		font-size: 32rpx;
	}

	.Dame {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 20rpx;

		button {
			width: 220rpx;
			background-color: cadetblue;
			color: #fff;
			margin: 0 auto;
		}
	}

	.ation {
		display: flex;
		padding: 20rpx;
		align-items: center;

		input {
			margin-left: 20rpx;
		}

		.Inform {
			font-size: 32rpx;
		}
	}
</style>